<template>
	<view class="login-container">
		<view class="huanying">
			欢迎来到志愿汇
		</view>
		<view class="xingdong">
			一起为爱行动
		</view>
		<form @submit="formSubmit">
			<view class="loginForm">
				<view class="inputWrapper">
					<input type="text" name="account"  placeholder="请输入您的手机号">
				</view>
				<view class="inputWrapper">
					<input type="text" name="password" :password="showPassword" v-model="password" placeholder="请输入登录密码">
					<image class="eyes" :src="url" @click="visionEye" mode="widthFix"></image>
				</view>
				<view class="LoginR">
					<button type="primary" form-type="submit" class="denglu">登录</button>
				</view>
			</view>
		</form>
		
		<view class="LoginR">
			<button  class="zhuce">我要注册</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword:true,
				url:'/static/fontIcon/eyesHide.png',
				account:'',
				password:'',
			};
		},
		methods: {
			//控制密码的显示与隐藏
			visionEye() {
				this.showPassword = !this.showPassword
				if(this.showPassword){
					this.url = '/static/fontIcon/eyesHide.png'
				} else {
					this.url = '/static/fontIcon/eyesShow.png'
				}
			},
			//发布提交登录
			async formSubmit(e){
				// console.log(e);
				var that = this
				that.account = e.detail.value.account
				that.password = e.detail.value.password
				
				if(that.account === '' || that.password === ''){
					uni.$showMsg('请完整输入用户名和密码')
				}else{
					console.log(that.account, that.password);
					let res = uni.$http.post('/homing/user/login', {
						password: that.password,
						username: that.account
					})
					// console.log(res);
					// uni.$http
				}
			}
		}
	}
</script>

<style lang="scss">
.login-container{
	// text-align: center;
	margin: 0 20px;
	.huanying{
		font-size: 24px;
		text-align: center;
		font-weight: 800;
		margin: 10px 0;
	}
	.xingdong{
		text-align: center;
	}
	.loginForm{
		margin: 20px 0;
		.inputWrapper{
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid gray;
			display: flex;
			justify-content: space-between;
			.eyes{
				width: 60rpx;
				// height: 100%;
			}
		}
	}
	.LoginR{
		margin: 15px 0;
		.denglu{
			background-color: #c00000;
		}
	}
}
</style>
